<template>
    <div class="login_maxbox">
        <div class="login_biglayer">
            <div class="login_midlayer">
                <div class="login_minlayer">
                    <h2>登录</h2>
                    <el-input class="user" v-model="username" placeholder="请输入账号"></el-input>
                    <el-input class="pwd" v-model="password" placeholder="请输入密码" show-password></el-input>
                    <div class="radio_pwd">
                        <el-checkbox v-model="checked" @change="handleUserPwd">记住我</el-checkbox>
                        <a href="#">忘记密码</a>
                    </div>
                    <el-button type="primary" @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() 
    {
        return {
            username:'',
            password:'',
            checked: false,
        }
    },
    mounted() 
    {
        //没登录
        if(this.$session.get("user-pwd-key") !== undefined)
        {
            if(this.$session.get("user-pwd-key")[0] !== '' && this.$session.get("user-pwd-key")[1] !== '')
            {
                this.username = this.$session.get("user-pwd-key")[0]
                this.password = this.$session.get("user-pwd-key")[1]
                this.checked = this.$session.get("user-pwd-key")[2]
            }
        }
        else
        {
            if(this.$route.path !== '/login')
                alert('想什么呢?老老实实登录!')
        }
    },
    created() 
    {
        //没登录
        if(this.$session.get("user-pwd-key") !== undefined)
        {
            if(this.$session.get("user-pwd-key")[0] !== '' && this.$session.get("user-pwd-key")[1] !== '')
                this.$router.replace('/main')
            else
            {
                this.$router.replace('/login')
                alert('想什么呢?老老实实登录!')
            }
        }
    },
    methods: {
        login()
        {
            if(this.username === 'cc' && this.password === '111')
                this.$router.replace('/main')
            else
                alert('你丫的用户名或是密码忘了吧！！')
        },
        handleUserPwd()
        {
            this.$session.set("user-pwd-key",[this.username,this.password,this.checked])
            
            //有数据
            if(this.$session.get("user-pwd-key")[0] !== '' && this.$session.get("user-pwd-key")[1] !== '')
            {
                this.username = this.$session.get("user-pwd-key")[0]
                this.password = this.$session.get("user-pwd-key")[1]
                this.checked = this.$session.get("user-pwd-key")[2]
            }
        }
    },
}
</script>

<style scoped lang="less">
    .login_maxbox
    {
        background: url('https://preview.pro.antdv.com/assets/background.ebcb9160.svg');
        // background: url('C:\Users\CC\Desktop\临时文件\3.jpg')no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        .login_biglayer
        {
            width: 360px;
            height: 500px;
            background: rgba(64, 158, 255,.9);
            border-radius: 20px;
            transform: rotate(6deg);
        }
        .login_midlayer
        {
            width: 360px;
            height: 500px;
            background: rgba(245, 108, 108,.9);
            border-radius: 20px;
            transform: rotate(-12deg);
            .login_minlayer
            {
                width: 360px;
                height: 500px;
                background: rgba(237, 239, 241.9);
                border-radius: 20px;
                transform: rotate(6deg);
                display: flex;
                flex-direction:column;
                align-items: center;
                h2
                {
                    color: #2e333d;
                    margin-top: 30px;
                }
                .el-input
                {
                    width: 80%;
                    margin-top: 20px;
                }
                .radio_pwd
                {
                    margin-top: 20px;
                    width: 80%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    a
                    {
                        color: #2e333d;
                        text-decoration: none;
                    }
                }
                .el-button
                {
                    font-size: 16px;
                    margin-top: 20px;
                    width: 80%;
                    border-radius: 5px;
                    background: #3375f1;
                }
            }
        }
    }
    
</style>
